<template>
    <!-- card 基础信息 -->
    <div class="zs-card zs-layout-flex-col">
        <div class="zs-layout-flex-col zs-layout-justify-center zs-layout-items-center zs-layout-grow">
            
            <img v-if="props.img" class="base-card-img zs-space-bottom-bg" :src="props.img">
            <!-- <div v-if="props.img" class="cur-img zs-space-bottom-bg" :style="{'background-image': `url(${props.img})`}"></div> -->
            <div v-if="!props.img" class="cur-img-nodata" :style="{'background-image': `url(${noData})`}"></div>
            <div v-if="!props.img" class="zs-text-gray">暂无数据</div>
        </div>
        <!-- <img v-if="props.img" class="base-card-img zs-space-bottom-bg zs-layout-grow" :src="props.img">
        <div v-else class="base-card-noimg zs-space-bottom-bg zs-layout-grow">
            <img :src="noData">
            <div class="zs-text-gray">暂无数据</div>
        </div> -->

        <CardTitle :title="props.title" :isMore="props.isMore" :rightTip="props.rightTip" @onMore="goDetail"></CardTitle>
        <InfoCard :list="props.list"></InfoCard>
    </div>
</template>

<script setup>
import CardTitle from '@/DbUiComponents/cardTitle'
import InfoCard from '@/DbUiComponents/infoCard'
// import noData from '@/assets/noData.png'
const noData = 'https://file.crehopson.com/DEFAULT/image/2023-08-31/19fe7c761bcd39d2b080dc31528a5c1c/noData.png'
const props = defineProps({
    img: {
        type: String,
        required: true,
        default: ''
    },
    title: {
        type: String,
        required: true,
        default: ''
    },
    isMore: {
        type: Boolean,
        required: false,
        default: true
    },
    rightTip: {
        type: Object,
        required: false,
        default: () => { return { text: '', className: '' } }
    },
    list: {
        type: Array,
        required: false,
    }
})
const emit = defineEmits(["onMore"]);
const goDetail = () => {
    emit("onMore");
}

</script>

<style scoped lang="scss">
.base-card-img {
    border-radius: 10px;
    max-width: 100%;
    width: 100%;
    object-fit: cover;
    height: calc(50vh - 204px);
}

// .base-card-noimg {
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: center;
//     width: 100%;
//     img {
//         width: 80px;
//     }
// }

.cur-img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
}
.cur-img-nodata {
    max-width: 80px;
    width: 100%;
    height: 80px;
    max-height: 100%;
    border-radius: 4px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
</style>
